<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加报修</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <link rel="stylesheet" href="../css/iconfont.css" />
    <script src="../js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../plugin/jqueryValidation/jqueryvalidate.js"></script>
    <script type="text/javascript" src="../plugin/jqueryValidation/messages_zh.js"></script>
    <script src="../js/mui.js"></script>
    <script src="../js/mui.zoom.js"></script>
    <script src="../js/mui.previewimage.js"></script>
    <script src="../../script/api.js"></script>
    <style>
        * { touch-action: none; }
        .mui-card .mui-control-content {
            padding: 10px;
        }
        /*自定义样式*/
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        a{
            color: #ffffff;
        }
        .mui-content{
            width: 100%;
            height: 100%;
            background: #ffffff;
        }
        .mui-bar{
            background:#4F77AA ;
            color: #ffffff;
            -webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
            box-shadow: 0 0 1px rgba(0,0,0,0);
        }
        .mui-title{
            color: #ffffff;
        }
        .content_item{
            width: 100%;
            height: 100%;
        }
        .content_item .mui-control-content{
            width: 100%;
            height: calc(100% - 48px);
        }

        .mui-segmented-control{
            width: 50%;
            margin-left: 25%;
            border: 1px solid #4F77AA;
            border-radius: 15px;
        }
        .mui-segmented-control .mui-control-item{
            line-height: 30px;
        }
        .mui-segmented-control .mui-control-item1{
            border-radius: 15px 0 0 15px;
        }
        .mui-segmented-control .mui-control-item2{
            border-radius: 0px 15px 15px 0px;
        }
        .mui-segmented-control .mui-control-item.mui-active{
            background: #4F77AA;
        }
        .mui-segmented-control .mui-control-item{
            border-color:#4F77AA;
            border-left: 1px solid #4F77AA;
            color: #4F77AA;
        }
        .mui-media-object i{
            font-size: 36px;
            color: #999999;
            position: relative;
            top:20px;
        }
        .mui-table-view .mui-media-object.mui-pull-left{
            margin-right: 20px;
        }
        .mui-table-view .mui-media-object{
            width: 36px;
            height: 36px;
            line-height: 36px;
        }
        .mui-media-runbutton{
            text-align: center;
            border-radius: 50% 50%;
            margin-top: 20px;
        }
        .mui-media-runbutton span{
            color: #FFFFFF;
            font-size: 12px;
        }
        .color-primary{
            background: #1ab394;
        }
        .color-success {
            background: #1c84c6;
        }
        .color-info {
            background: #23c6c8;
        }
        .color-warning {
            background: #f8ac59;
        }
        .mui-media-body span.date{
            color:#f8ac59 ;
        }
        .mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
            width: 55%;
            float:left;
        }
        form span.icon{
            float: right;
            padding-right: 5%;
            padding-top: 10px;
        }
        .line_x{
            width:100%;
            height:8px;
            background: #EFEFF4;
        }
        form .textarea{
            border: 1px solid #dddddd;
              float: right;
            margin-top: 10px;
         /*   width: 55%;
          
            margin-right: 10%;*/
        }
        .mui-input-group:after{
            background: rgba(0,0,0,0);
        }
        .bottom_submit {
            position: absolute;
            width: 100%;
            height: 48px;
            text-align: center;
            line-height: 48px;
            bottom: 0;
            background: #4F77AA;
            z-index: 2;
        }
        input[type=button]#submit {
            width: 100%;
            height: 48px;
            line-height: 48px;
            background: #4F77AA;
            border: none;
            padding: 0;
            color: #ffffff;
        }
    
        .clear{
            clear: both;
        }
        select.mui-h5{
            font-size: 18px;
        }
        .mui-input-group:before{
            background: #ffffff;
        }

        /*图片样式*/
        #avatar{
            width:100%;
            margin: 0;
            padding: 0;
        }
        #avatar li{
            width: 25%;
            height: 60px;
            float: left;
            list-style: none;
            padding: 0px 5px;
            box-sizing: border-box;
            margin-top: 10px;
        }
        #avatar li img{
            display:inline-block;
            width: 100%;
            height: 100%;
        }
        .mui-input-row .mui-btn{
            width: 65%;
        }
        /*语音播放*/
        @keyframes yuying{
            0%{
                height: 0%;
            }
            20%{
                height: 50%;
            }
            50%{
                height: 90%;
            }
            80%{
                height: 50%;
            }
            100%{
                height: 0%;
            }
        }
        .dialog-container1{
            width: 60px;
            height: 25px;
            background: #efefef;
            border: 1px solid #0094de;
            border-radius: 5px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            position: absolute;top:5px;left:70px;
        }
        .dialog-container1 .audio-animation1{
            width: 30px;
            height: 20px;
        }
        .audioPlay1 #one1{
            animation:yuying 0.6s infinite 0.15s;
            -webkit-animation:yuying 0.6s infinite 0.15s;
        }
        .audioPlay1 #two1{
            animation:yuying 0.6s infinite 0.3s;
            -webkit-animation:yuying 0.6s infinite 0.3s;
        }
        .audioPlay1 #three1{
            animation:yuying 0.6s infinite 0.45s;
            -webkit-animation:yuying 0.6s infinite 0.45s;
        }
        .audioPlay1 #four1{
            animation:yuying 0.6s infinite 0.6s;
            -webkit-animation:yuying 0.6s infinite 0.6s;
        }

        #one1,#two1,#three1,#four1{
            width:2px;
            border-radius: 50px;
            background-color: #0094de;
            vertical-align: middle;
            display: inline-block;
        }
        #one1{
            margin-left: 1px;
            height: 50%;
        }
        #two1{
            height: 90%;
        }
        #three1{
            height: 70%;
        }
        #four1{
            height: 40%;
        }

        /*预览图片样式*/
        .mui-preview-image.mui-fullscreen {
            position: fixed;
            z-index: 20;
            background-color: #000;
        }
        .mui-preview-header,
        .mui-preview-footer {
            position: absolute;
            width: 100%;
            left: 0;
            z-index: 10;
        }
        .mui-preview-header {
            height: 44px;
            top: 0;
        }
        .mui-preview-footer {
            height: 50px;
            bottom: 0px;
        }
        .mui-preview-header .mui-preview-indicator {
            display: block;
            line-height: 25px;
            color: #fff;
            text-align: center;
            margin: 15px auto;
            width: 70px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 12px;
            font-size: 16px;
        }
        .mui-preview-image {
            display: none;
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        .mui-preview-image.mui-preview-in {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }
        .mui-preview-image.mui-preview-out {
            background: none;
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
        }
        .mui-preview-image.mui-preview-out .mui-preview-header,
        .mui-preview-image.mui-preview-out .mui-preview-footer {
            display: none;
        }
        .mui-zoom-scroller {
            position: absolute;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            -webkit-backface-visibility: hidden;
        }
        .mui-zoom {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .mui-slider .mui-slider-group .mui-slider-item img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
        .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
            width: 100%;
        }
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
            display: inline-table;
        }
        .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
            display: table-cell;
            vertical-align: middle;
        }
        .mui-preview-loading {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
        }
        .mui-preview-loading.mui-active {
            display: block;
        }
        .mui-preview-loading .mui-spinner-white {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
            height: 50px;
            width: 50px;
        }
        .mui-preview-image img.mui-transitioning {
            -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
            transition: transform 0.5s ease, opacity 0.5s ease;
        }
        @-webkit-keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @-webkit-keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        #avatar img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
    <h1 class="mui-title">添加报修</h1>
</header>
<div class="mui-content">
   
    <div class="content_item">

        <div id="item1" class="mui-control-content mui-active">
                <div id="scroll" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <form id="mainForm1" class="mui-input-group">
                            <div class="mui-input-row">
                                <label>报修标题：</label>
                                <input type="text" id="repairName1" value="" />
                            </div>

                            <div class="mui-input-row">
                                <label>报修分类：</label>
                                <input type="hidden" id="repairCategoryId1" value="" />
                                <input type="text" id="repairCategory1" value="" />
                            </div>
                            <div class="mui-input-row append">
                                <label>选择设备：</label>
                                <input type="text" id="deviceCode1"  onclick="choiceEquipment()">

                            </div>
                            <div class="mui-input-row">
                                <label>设备名称：</label>
                                <input type="hidden" id="haveNoDevice1" value="wu">
                                <input type="text"  id="deviceName1" placeholder="西安"/>
                            </div>
                            <div class="mui-input-row">
                                <label>设备位置：</label>
                                <input type="text" id="deviceSpace1" placeholder="西安"/>
                            </div>
                            <div class="mui-input-row">
                                <label>结束时间：</label>
                                <input type="text" class="btn mui-btn mui-btn-block" id="start_time" data-options="{}" value="" >
                            </div>
                            <div class="mui-input-row">
                                <label>工单类型：</label>
                                <input type="hidden" id="workOrderTypeId1" placeholder="西安"/>
                                <input type="text" id="workOrderType1" placeholder="西安"/>
                            </div>
                            <div class="line_x" style=""></div>
                            <div class="" style="height:40px;padding: 10px 15px;">
                                <label>故障描述：</label>
                                <textarea class="textarea" id="repairContent1" rows="5" placeholder="故障描述"></textarea>
                            </div>
                            <div class="clear"></div>
                            <div class="" style="height:40px;padding: 10px 15px;">
                                <label>报修描述：</label>
                                <textarea class="textarea" id="repairDesc1" rows="5" placeholder="报修描述"></textarea>
                            </div>
                            <div class="clear"></div>
                            <div class="" style="padding: 10px 15px;">
                                <label>图片：</label>
                                <ul id="avatar">
                                	<li><img src="../img/shuijiao.jpg" data-preview-src="" data-preview-group="1"></li>
                                	<li><img src="../img/shuijiao.jpg" data-preview-src="" data-preview-group="1"></li>
                                	<li><img src="../img/shuijiao.jpg" data-preview-src="" data-preview-group="1"></li>
                                	<li><img src="../img/shuijiao.jpg" data-preview-src="" data-preview-group="1"></li>
                                	<li><img src="../img/shuijiao.jpg" data-preview-src="" data-preview-group="1"></li>
                                	<li><img src="../img/shuijiao.jpg" data-preview-src="" data-preview-group="1"></li>
            					</ul>
                            </div>

                            <!--语音播放-->
                            <div class="mui-input-row">
                                <label>语音播放：</label>
                                <input type="text" placeholder="播放" style="width:5%;float:left;">
                                <div class="dialog-container1" id="play" style="margin-left: 15%;" onclick="play()">
                                    <div class="audio-animation1">
                                        <div id="one1"></div>
                                        <div id="two1"></div>
                                        <div id="three1"></div>
                                        <div id="four1"></div>
                                    </div>
                                </div>
                                <span class="play_time" style="margin-left: 16%;position: absolute;top:8px;">15''</span>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
    </div>
    <div class="bottom_submit">
        <input type="button" value="提交" id="submit">
    </div>

</div>
<script>
    mui('body').on('tap','a',function(){
        window.top.location.href=this.href;
    });
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    mui.previewImage();//预览图片
    (function($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });

    })(mui);

    $(document).on("click","span.mui-pull-left",function(){
        window.location.href="../../index.html";
    })
</script>

</body>

</html>